{% load static from staticfiles %}
<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" href="{% static "css/style.css" %}">
        <title>CoREx - PaccanaroLab</title>
    
        <!-- Roboto -->
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    
        <!-- Global site tag (gtag.js) - Google Analytics -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-12707805-4"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
    
            gtag('config', 'UA-12707805-4');
        </script>
        
    </head>

<body>
    <div class="container-lg">
        <div class="row">
            <div id="header" class="col">
                <a href="https://paccanarolab.org"><img id="paccanarolab_logo" src="{% static "images/PaccanaroLab.png" %}" alt=""/></a>
                <a href="https://emap.fgv.br/"><img src="{% static "images/FGV-EMAp.png"%}" alt=""/></a>
                <a href="https://royalholloway.ac.uk"><img src="{% static "images/RHUL.jpg" %}" alt=""/></a>
            </div>
        </div>
        <hr class="row">
        <div id="preamble" class="row">
            <div class="col">

    
    <h1>CoREx - Customizable Explorer</h1>
    
    <form action="test" method="POST" enctype="multipart/form-data">
        <!-- <div class="input-group", style="width: 400px">
            <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
            </div>
            <div class="custom-file">
            <input type="file" class="custom-file-input" id="inputGroupFile01"
                aria-describedby="inputGroupFileAddon01" accept=".txt" multiple=false>
            <label class="custom-file-label" for="inputGroupFile01">...your protein file</label>
            </div>
        </div> -->
        {% csrf_token %}
        <p>You may upload a list of protein targets for a drug, and observe its behaviour in the COVID-19 disease module.</p>

        <p>The drug, defined by its molecular targets, will be placed alongside the drugs that we have previously analysed, and you will be able to compare the strength of this effect.</p>
        
        <div class="form-group blue-border", style="width: 400px">
            <label for="protein-textarea">One protein per line</label>
            <textarea name="prot" class="form-control" id="protein-textarea" rows="3"></textarea>
        </div>
        <button id="load-example" type="button" class="btn btn-primary">Load Example</button>

        <br><br>
        <p>Or, submit a file containing one UniProt accession number per line:</p>

        {{ form }}
        <br>
        <!-- <form action="test" method="POST"> -->
        Select a kernel to compute the interactome-based scores.
        <div class="form-group", style="width: 400px">
            <label for="exampleFormControlSelect1">Kernel:</label>
            <select name="kernel" class="form-control" id="exampleFormControlSelect1">

            <!-- <option>"p-Step 2"</option> ctrl+k+c
            <option>"p-Step 4"</option> ctrl + k+u -->

            {% for k in kernels %}
                <option value="{{k.kernel_name}}">  
                    {{k.kernel_name}}
                </option>
            {% endfor %}
            </select>
        </div>

        {% for n in networks%}
        <input type="radio" id="{{n.name}}" name="network" value="{{n.name}}" {% if forloop.last %}checked{% endif %}>
        <label for="{{n.name}}">{{n.name}}</label> &nbsp;&nbsp;
        {% endfor %}
        <input type="submit" value="Send">
    </form>
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <script>
        d3.select('#load-example').on('click', function(){
            d3.select('#protein-textarea').html("P35556\nP41180\nQ96FQ6\nQ02818\nQ99828\nP0DP25\nP06703\nP22676\nP0DP24\nP62166\nQ13938\nP0DP23\nP27797\nQ99584\nQ96L12\nP27824\nQ86UW7\nP28676\nQ75N90\nQ9ULU8\nP30626\nQ15493\nO75340\nP13693\nQ9UBV8\nP80303\nO75838\nQ9ULB1\nO14958\nP09486\nQ99653\nP04271\nP31415")
        })
    </script>
</body>



